<template>
	<view class="with-drawal">
		<NavBar title="提现设置" bgc="linear-gradient( 180deg, #FFEFED 0%, rgba(255,248,244,0.6) 70%, #FFFFFF 98%)" />
		<view class="content">
			<view class="wx-zfb">
				<view class="item">
					<view class="label"> 微信号姓名 </view>
					<view class="value"> 
						<input v-model="txInfo.wx_name" type="text" placeholder="请输入微信姓名" placeholder-style="color: #D8D8D8;" /> 
					</view>
				</view>
				<view class="skm">
					<view class="title"> 微信收款码 </view>
					<view class="img-box">
						<ChooseBtn @choose="chooseWX" v-if="!txInfo.wx_img" class="choose"/>
						<view class="img" v-else>
							<image class="i-img" :src="txInfo.wx_img_path" />
							<image src="/static/icon/shop/close-img.png" class="close" @tap="delWXImg" />
						</view>
					</view>
				</view>
				<view class="item">
					<view class="label"> 支付宝姓名 </view>
					<view class="value"> 
						<input v-model="txInfo.zfb_name" type="text" placeholder="请输入支付宝姓名" placeholder-style="color: #D8D8D8;" /> 
					</view>
				</view>
				<view class="skm">
					<view class="title"> 支付宝收款码 </view>
					<view class="img-box">
						<ChooseBtn @choose="chooseZFB" v-if="!txInfo.zfb_img"/>
						<view class="img" v-else>
							<image class="i-img" :src="txInfo.zfb_img_path" />
							<image src="/static/icon/shop/close-img.png" class="close" @tap="delZFBImg" />
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="item">
					<view class="label"> 开户行 </view>
					<view class="value"> 
						<input v-model="txInfo.bank_site" type="text" placeholder="请输入开户行" placeholder-style="color: #D8D8D8;" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 持卡人姓名 </view>
					<view class="value"> 
						<input v-model="txInfo.bank_name" type="nickname" placeholder="请输入持卡人姓名" placeholder-style="color: #D8D8D8;" /> 
					</view>
				</view>
				<view class="item">
					<view class="label"> 银行卡号 </view>
					<view class="value"> 
						<input v-model="txInfo.bank_code" type="number" placeholder="请输入银行卡号" placeholder-style="color: #D8D8D8;" /> 
					</view>
				</view>
			</view>
			<view class="phone">
				<view class="item">
					<view class="label"> 手机号 </view>
					<view class="value"> 
						<view class="text"> {{mobile}} </view>
						<!-- <input v-model="mobile" type="number" placeholder="请输入手机号" placeholder-style="color: #D8D8D8;" /> -->
					</view>
				</view>
				<view class="item">
					<view class="label"> 验证码 </view>
					<view class="value"> 
						<input v-model="code" type="number" placeholder="请输入验证码" placeholder-style="color: #D8D8D8;" /> 
						<Yzm class="yzm" :mobile="mobile" @getYzm="getYzm" />
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn" @tap="setTxInfo"> 保存 </view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import ChooseBtn from '@/components/ChooseBtn.vue'
	import { useMiddleWare, useUserStore } from '@/store/index.js'
	import { GetTXInfoApi, SetTXInfoApi, GetYzmApi } from '@/service/agent.js'
	import Yzm from '@/components/YzmBtn.vue'
	const txInfo = ref({
		bank_code: '', // 银行卡号
		bank_name: '', // 银行卡真实姓名
		bank_site: '', // 开户行地址
		wx_code: '', // 
		wx_img: '',  // 微信收款码id
		wx_name: '', // 微信姓名
		wx_img_path: '', // 微信收款码
		zfb_code: '',  // 
		zfb_img: '',  // 支付宝收款码id
		zfb_name: '',  // 支付宝姓名
		zfb_img_path: '',  // 支付宝收款码
	})
	const mobile = computed(() => {
		const { userInfo } = useUserStore()
		return userInfo.mobile
	})
	const code = ref('')
	const getTxInfo = () => {
		const { SETTXINFO } = useMiddleWare()
		GetTXInfoApi().then(res => {
			txInfo.value = res.data
			SETTXINFO(res.data)
		})
	}
	const chooseWX = (e) => {
		txInfo.value.wx_img = e.id
		txInfo.value.wx_img_path = e.img_url
	}
	const delWXImg = () => {
		txInfo.value.wx_img = ''
		txInfo.value.wx_img_path = ''
	}
	const chooseZFB = (e) => {
		txInfo.value.zfb_img = e.id
		txInfo.value.zfb_img_path = e.img_url
	}
	const delZFBImg = () => {
		txInfo.value.zfb_img = ''
		txInfo.value.zfb_img_path = ''
	}
	const getYzm = () => {
		GetYzmApi({type: 'bank', mobile: mobile.value})
	}
	const setTxInfo = () => {
		if(code.value == '') return getApp().globalData.toast('请输入验证码')
		const { bank_code, wx_name, wx_img, zfb_name, zfb_img, bank_name, bank_site } = txInfo.value
		let params = {
			wx_name,
			wx_img,
			zfb_name,
			zfb_img,
			bank_name,
			bank_code,
			bank_site,
			code: code.value,
		}
		SetTXInfoApi(params).then(res => {
			getApp().globalData.toast('修改成功')
			uni.navigateBack()
		})
	}
	onLoad(() => {
		getTxInfo()
	})
</script>

<style lang="scss" scoped>
	.with-drawal {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
			.wx-zfb, .card, .phone {
				padding: 0 12px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				.item {
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #eeeeee;
					box-sizing: border-box;
					&:nth-last-of-type(1) {
						border-bottom: 0;
					}
					.label {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
					}
					.value {
						display: flex;
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						align-items: center;
						input {
							color: #333333;
							font-size: 14px;
							font-weight: 400;
							text-align: right;
						}
						.yzm {
							margin-left: 5px;
						}
					}
				}
				.skm {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
					}
					.img-box {
						display: flex;
						padding: 12px 0;
						align-items: center;
						.img {
							width: 74px;
							height: 74px;
							border-radius: 10px;
							position: relative;
							overflow: hidden;
							.i-img {
								width: 100%;
								height: 100%;
							}
							.close {
								width: 18px;
								height: 18px;
								position: absolute;
								top: 0;
								right: 0;
							}
						}
					}
				}
			}
			.btn-box {
				padding: 0 22px;
				margin-top: 20px;
				.btn {
					height: 40px;
					color: #FFFFFF;
					font-size: 17px;
					font-weight: 500;
					line-height: 40px;
					text-align: center;
					background: #FF3B1E;
					border-radius: 106px;
				}
			}
		}
	}

</style>
